<template>
	<div>
		<!-- 不传数据的 -->
		<!-- <slot name="header"></slot>
    <slot name="main"></slot>
    <slot name="footer"></slot> -->
		<!-- 传数据的 -->
		<div v-for="(item, i) in value" :key="i">
			<!-- 错误的写法 未将要传的参数绑定到 slot的属性上面-->
			<!-- <slot name="header">{{ item }}</slot> -->
			<!-- 正确的 -->
			<!-- 为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去： -->
			<slot name="header" :row="item" :$index="i" :column="i">
				{{ item.id }}
			</slot>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			value: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				key: 'value'
			}
		}
	}
</script>

<style lang="scss" scoped></style>
